<template>
  <div class="banner" @mouseenter="stopTimer" @mouseleave="autoMove">
    <div class="imgs">
      <ul class="wrapper-img">
        <li
          :class="classNames[i]"
          v-for="(item, i) in items"
          :key="item.imagUrl"
          @click="setId(item.targetId)"
        >
          <a href="#"><img :src="item.imageUrl" alt="" /></a>
        </li>
      </ul>
    </div>
    <div class="arrows">
      <div class="left-arrow arrow" @click="left">
        <a-icon type="left" class="ico" />
      </div>
      <div class="right-arrow arrow" @click="right">
        <a-icon type="right" class="ico" />
      </div>
    </div>
    <div class="dots" :style="{ width: dotsWidth + 'rem' }">
      <span
        :class="{ active: activeIndex === i }"
        v-for="(item, i) in classNames"
        :key="item"
        @mouseover.stop="changeActive(i)"
      >
      </span>
    </div>
  </div>
</template>

<script>
import axios from "@/utils/axios";
export default {
  name: "Banner",
  data() {
    return {
      classNames: [],
      activeIndex: 0,
      items: [],
      timer: null,
      dotsWidth: 0,
    };
  },
  methods: {
    left(isAutoMove) {
      if (!isAutoMove) {
        clearInterval(this.timer);
      }
      this.classNames.unshift(this.classNames[this.classNames.length - 1]);
      this.classNames.pop();
      this.activeIndex--;
      if (this.activeIndex < 0) {
        this.activeIndex = this.items.length - 1;
      }
    },
    right() {
      //   console.log('right')
      // 将最后一个类名放到第一个
      this.classNames.push(this.classNames[0]);
      this.classNames.shift();
      this.activeIndex = ++this.activeIndex % this.items.length;
    },
    autoMove() {
      // this.timer = setInterval(() => {
      //   this.left(true);
      // }, 3000);
    },
    stopTimer() {
      clearInterval(this.timer);
    },
    changeActive(index) {
      this.stopTimer();
      let dis = index - this.activeIndex;
      if (dis === 0) {
        return;
      } else if (dis > 0) {
        // 向左
        for (let i = 0; i < dis; i++) {
          this.classNames.unshift(this.classNames[this.classNames.length - 1]);
          this.classNames.pop();
        }
      } else {
        // 向右
        this.classNames.push(this.classNames[0]);
        this.classNames.shift();
      }
      this.activeIndex = index;
    },
    setId(id) {
      this.$bus.$emit("changeId", id);
    },
  },
  created() {
    axios.get("/banner").then((res) => {
      const banners = res.banners;
      let length = banners.length;
      if (banners.length) {
        this.items = banners;
        let arr = [];
        for (let i = 0; i < length; i++) {
          arr[i] = "item" + (i + 1);
        }
        this.classNames = arr;
        this.dotsWidth = 3 * length;
        this.items = banners;
        arr = null;
      }
    });
  },
  mounted() {
    this.autoMove();
  },
  beforeDestroy() {
    this.stopTimer();
  },
};
</script>

<style lang="scss" scoped>
.banner {
  position: relative;
  width: 80rem;
  height: 19rem;
  margin: 0 auto;
  padding-right: 4rem;
  &:hover {
    .arrow {
      display: block;
    }
  }
  .imgs {
    width: 100%;
    height: 19rem;
    .wrapper-img {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      li {
        position: absolute;
        height: 18rem;
        width: 52rem;
        transition: all 0.2s ease-in-out;
        img {
          border-radius: 1rem;
          height: 100%;
          width: 100%;
        }
      }
      li.item1 {
        transform: scale(0.9);
        transform-origin: 0 100%;
      }
      li.item2 {
        transform: translateX(12.5rem);
        z-index: 3;
        transform-origin: 100% 100%;
      }
      li.item3 {
        transform: translateX(25rem) scale(0.9);
        transform-origin: 100% 100%;
        z-index: 1;
      }
      li.item4 {
        transform: translateX(74.2rem) scale(0.9);
        transform-origin: 100% 100%;
      }
      li.item5 {
        transform: translateX(100rem) scale(0.9);
        transform-origin: 100% 100%;
      }
      li.item6 {
        transform: translateX(115rem) scale(0.9);
        transform-origin: 100% 100%;
      }
      li.item7 {
        transform: translateX(130rem) scale(0.9);
        transform-origin: 100% 100%;
      }
      li.item8 {
        transform: translateX(145rem) scale(0.9);
        transform-origin: 100% 100%;
      }
      li.item9 {
        transform: translateX(160rem) scale(0.9);
        transform-origin: 100% 100%;
      }
      li.item10 {
        transform: translateX(175rem) scale(0.9);
        transform-origin: 100% 100%;
      }
    }
  }

  .arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-60%);
    cursor: pointer;
    z-index: 10;
    width: 3rem;
    height: 3rem;
    background: rgba(0, 0, 0, 0.1);
    text-align: center;
    padding-top: 0.5rem;
    border-radius: 50%;
    &:hover {
      .ico {
        color: #fff;
      }
    }
    .ico {
      font-size: 1.5rem;
      color: #ccc;
    }
  }
  .left-arrow {
    left: 0rem;
  }
  .right-arrow {
    right: 4rem;
  }
  .dots {
    width: 37rem;
    height: 3rem;
    margin: 0 auto;
    span {
      display: inline-block;
      height: 1rem;
      width: 1rem;
      border-radius: 50%;
      background: #e6e6e6;
      margin: 0 1rem;
      cursor: pointer;
    }
    .active {
      background: #f40;
    }
  }
}
</style>